<template>
  <div>
    <div class="class-introduce">
      <span class="bold-prompt">
        套餐
        <span class="introduce-prompt">
          介绍
        </span>
      </span>
      <!-- eslint-disable vue/no-v-html -->
      <VHtml
        tag="div"
        class="class-introduce-content"
        :html="classInfo.Description"
      />
      <!-- eslint-enable vue/no-v-html -->
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    VHtml: () => import('components/VHtml.vue'),
  },
  // eslint-disable-next-line vue/require-default-prop
  // eslint-disable-next-line vue/require-prop-types
  props: ['classInfo'],
  data () {
    return {}
  },
  created () {
  },
  methods: {},
})
</script>

<style lang="scss" scoped>
.class-introduce {
  padding: 30px 24px;
  margin-bottom: 20px;
  background-color: #fff;
}
.bold-prompt,.introduce-prompt {
  display: flex;
  font-size: 32px;
  color: #333;
  font-weight: 600;
}
.introduce-prompt {
  font-weight: 400;
}
.class-introduce-content {
  width: 100%;
  margin-top: 30px;
  font-size: 28px;
  color: #4B515E;
  line-height: 48px;
}
.teacher-introduce {
  position: relative;
  padding: 30px 24px;
  background-color: #fff;
  /deep/ {
    .van-swipe__indicator {
      background-color: $primary-web;
    }
    .van-swipe__indicator--active {
      width: 40px;
      background-color: $primary-web;
      border-radius: 5px;
    }
  }
}
.info-box {
  width: 100%;
  text-align: center;
}
.arrow-left {
  position: absolute;
  margin-top: 51px;
  margin-left: 24px;
  left: 0;
  width: 19px;
  z-index: 9;
  transform:rotate(180deg);
}
.arrow-right {
  position: absolute;
  margin-top: 51px;
  margin-right: 24px;
  right: 0;
  width: 19px;
  z-index: 9;
}
.teacher-img {
  width: 98px !important;
  height: 98px !important;
}
.teacher-name {
  font-size: 28px;
  color: #333;
  padding-top: 13px;
  @include ellipsis;
}
.teacher-desc {
  min-height: 200px;
  font-size: 28px;
  color: #4B515E;
  text-align: left;
  margin-top: 30px;
  line-height: 48px;
  // 字母-数字强制换行
  word-break: break-all;
  word-wrap:break-word;
}
.no-desc {
  text-align: center;
  padding-top: 50px;
}
.no-data {
  font-size: 32px;
  padding-top: 100px;
  text-align: center;
}
.no-data-img {
  width: 150px;
  margin-bottom: 20px;
}
</style>
